<template>
  <div class="module-card">
    <div class="module-header">
      <h2 class="module-title">资源使用状态</h2>
      <div class="text-sm text-gray-500">过去7天</div>
    </div>
    <div class="p-4">
      <div class="space-y-4">
        <div v-for="(resource, index) in resourceUsage" :key="index">
          <div class="flex justify-between items-center mb-1">
            <span class="text-sm">{{ resource.name }}</span>
            <span class="text-sm font-medium">{{ resource.usage }}%</span>
          </div>
          <div class="w-full bg-gray-100 rounded-full h-2">
            <div class="h-2 rounded-full" :class="resource.barColorClass" :style="{ width: resource.usage + '%' }"></div>
          </div>
          <div class="flex justify-between text-xs text-gray-500 mt-1">
            <span>最低: {{ resource.min }}%</span>
            <span>最高: {{ resource.max }}%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      resourceUsage: [
        {
          name: 'CPU使用率',
          usage: 68,
          min: 42,
          max: 85,
          barColorClass: 'bg-primary'
        },
        {
          name: '内存使用率',
          usage: 75,
          min: 60,
          max: 92,
          barColorClass: 'bg-warning'
        },
        {
          name: '磁盘使用率',
          usage: 45,
          min: 40,
          max: 52,
          barColorClass: 'bg-success'
        },
        {
          name: '网络带宽',
          usage: 32,
          min: 15,
          max: 68,
          barColorClass: 'bg-info'
        }
      ]
    };
  }
};
</script>

<style scoped>
/* 保持与原页面一致的样式 */
.bg-primary {
  background-color: #3b82f6;
}
.bg-warning {
  background-color: #f59e0b;
}
.bg-success {
  background-color: #10b981;
}
.bg-info {
  background-color: #06b6d4;
}
.bg-gray-100 {
  background-color: #f3f4f6;
}
</style>